<template>
    <div class="InvitationCode" :style="'min-height: '+docheight+'px'">
        <div v-if="!showTimeOut&&showCont">
            <div class="mainItem">
                <div class="mainItemName">账号设置</div>
                <div class="formCont">
                    <div class="formItem">
                        <van-field name="radio" label="营业状态">
                            <template #input>
                                <van-radio-group checked-color="#6455d4" v-model="info.type" direction="horizontal">
                                    <van-radio :name="1">上线</van-radio>
                                    <van-radio :name="2">休息</van-radio>
                                </van-radio-group>
                            </template>
                        </van-field>
                    </div>
                    <div class="formItem">
                        <van-field
                            v-model="info.sk_date"
                            is-link
                            readonly
                            label="授课日期"
                            placeholder="请选择授课日期"
                            @click="showDayMask = true"
                        />
                        <van-popup v-model:show="showDayMask" round position="bottom">
                            <div class="maskCont">
                                <div class="maskName">*请选择授课日期</div>
                                <div class="timeCont">
                                    <div :class="index%4==0?'timeItem noLeft':'timeItem'" :key="index" v-for="(item,index) in dayArr">
                                        <div @click="checkDayFn(item,index)" :class="item.active?'activeTimeMain timeItemMain':'timeItemMain'">
                                            <span>{{ item.name }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="setBtn">
                                    <save-btn color="#6455d4" value="确认选择" style="width: 100%;" @saveClick="sureCheckDay"></save-btn>
                                </div>
                            </div>
                        </van-popup>
                    </div>
                    <div class="formItem">
                        <van-field
                            v-model="info.serveTime"
                            is-link
                            readonly
                            label="授课时间"
                            placeholder="请选择授课时间"
                            @click="showTime = true"
                        />
                        <van-popup v-model:show="showTime" round position="bottom">
                            <div class="maskCont">
                                <div class="maskName">*选择教师授课时间范围</div>
                                <div class="timeCont">
                                    <div :class="index%4==0?'timeItem noLeft':'timeItem'" :key="index" v-for="(item,index) in timeArr">
                                        <div @click="timeFn(item,index)" :class="item.active?'activeTimeMain timeItemMain':'timeItemMain'">
                                            <span>{{ item.time }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="setBtn">
                                    <div class="setBtnItem">
                                        <save-btn color="#6455d4" value="全天授课" style="width: 100%;" @saveClick="allDayFn"></save-btn>
                                    </div>
                                    <div class="setBtnItem">
                                        <save-btn color="#6455d4" value="确认时间" v-if="startIndex>=0&&endIndex>0&&endIndex>startIndex" style="width: 100%;" @saveClick="sureCheckTime"></save-btn>
                                        <save-btn color="#6455d4" value="请选择时间" v-else style="width: 100%;opacity: 0.5;"></save-btn>
                                    </div>
                                </div>
                            </div>
                        </van-popup>
                    </div>
                    <div class="formItem">
                        <van-field
                            v-model="info.password"
                            label="登录密码"
                            placeholder="请输入登录密码"
                        />
                    </div>
                </div>
                <save-btn value="保存信息" style="width: 100%;" @saveClick="saveTopFn"></save-btn>
            </div>
            <div class="mainItem">
              <div class="mainItemName">关联课程</div>
              <div class="goodsList">
                <div @click="maskGoodFn(item,index)" class="acticeGoods listItem" :key="index" v-for="(item,index) in packArr">
                    <div class="itemImg">
                        <img :src="item.course_cover+ossSrc">
                    </div>
                    <div class="itemInfo">
                        <div class="itemName">
                        <span>{{ item.course_name }}</span>
                        </div>
                        <div class="priceVal">
                        <span class="price" v-if="item.course_rule_name==item2.rule_name" :key="index2" v-for="(item2,index2) in item.course_rule">￥{{ item2.price }}元/{{ getUnit(item) }}</span>
                        </div>
                    </div>
                </div>
            </div>
            </div>
            <sub-load v-if="showLoad"></sub-load>
        </div>
        <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
        <getLoad v-if="!showCont"></getLoad>
        <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  
  <script>
    import {Toast } from 'vux'
    import SaveBtn from '@/components/public/saveBtn.vue'
    import subLoad from '@/components/public/subLoad.vue'
    import getLoad from '@/components/public/getLoad'
    import getTimeOut from '@/components/public/getTimeOut'
    import { index,editInfo,teacherCourse } from '@/http/api'
    export default {
      components: {getTimeOut,getLoad,subLoad,Toast,SaveBtn},
      data() {
        return {
            showTimeOut: false,
            showCont:false,
            showLoad:false,
            showText:'',
            showToast:false,
            info:{
                type:1,
                sk_date:'',
                start:'',
                end:'',
                password:'',
                serveTime:'全天皆可接单'
            },
            showTime:false,
          showDayMask:false,
          dayArr:[
            {name:'周一',active:false},
            {name:'周二',active:false},
            {name:'周三',active:false},   
            {name:'周四',active:false},
            {name:'周五',active:false},
            {name:'周六',active:false},
            {name:'周天',active:false},
          ],
            timeArr:[
                {time:'08:00',active:false},
                {time:'09:00',active:false},
                {time:'10:00',active:false},
                {time:'11:00',active:false},
                {time:'12:00',active:false},
                {time:'13:00',active:false},
                {time:'14:00',active:false},
                {time:'15:00',active:false},
                {time:'16:00',active:false},
                {time:'17:00',active:false},
                {time:'18:00',active:false},
                {time:'19:00',active:false},
                {time:'20:00',active:false},
                {time:'21:00',active:false},
                {time:'22:00',active:false},
            ],
            startIndex:'',
            endIndex:'',
            startTime:"",
            endTime:"",
            packArr:[],
        }
      },
      props: {},
      methods:{
        saveTopFn(){
            let data = {
                service_status:this.info.type,
                teacher_date:this.info.sk_date,
                teacher_time:this.info.serveTime,
                teacher_password:this.info.password,
            }
            editInfo(data).then((res)=>{
                this.showCont= true
                if(res.data.code==1){
                    this.showToast = true
                    this.showText = res.data.msg
                    this.getData()
                }else{
                    this.showToast = true
                    this.showText = '数据获取失败'
                }
            }).catch(()=>{
                this.showTimeOut = true
                this.showCont= true
            })
        },
        getUnit(item){
            if(item.course_unit==1){
                return '小时'
            }else if(item.course_unit==2){
                return '课时'
            }
        },
        sureCheckDay(){
            this.info.sk_date = this.checkDayStr()
            this.showDayMask = false
        },
        checkDayFn(item,index){
            item.active= !item.active
        },
        sureCheckTime(){
            if(this.startIndex>=0&&this.endIndex>0&&this.endIndex>this.startIndex){
                this.startTime = this.timeArr[this.startIndex].time
                this.endTime = this.timeArr[this.endIndex].time
                this.info.serveTime = this.startTime+'-'+this.endTime
                this.showTime = false;
                
            }
        },
        allDayFn(){
            for(let i = 0;i<this.timeArr.length;i++){
                this.timeArr[i].active = true
            }
            this.startIndex = 0
            this.endIndex = this.timeArr.length-1
            this.sureCheckTime()
        },
        timeFn(item,index){
            if(this.startIndex.length==0||(this.startIndex==index&&this.startIndex!=0)){
                this.startIndex = index
                item.active  = true
            }else if(this.startIndex.length!=0&&this.endIndex.length!=0){
                for(let i = 0;i<this.timeArr.length;i++){
                    this.timeArr[i].active = false
                }
                this.startIndex = index 
                item.active  = true
                this.endIndex = ''
            }else{
                if(this.startIndex>index){
                    this.endIndex = this.startIndex
                    this.startIndex = index
                }else{
                    this.endIndex = index
                }
                for(let i = 0;i<this.timeArr.length;i++){
                    if(i>=this.startIndex&&i<=this.endIndex){
                        this.timeArr[i].active = true
                    }else{
                        this.timeArr[i].active = false
                    }
                }
            }
        },
        checkDayStr(){
            let arr = []
            for(let i = 0;i<this.dayArr.length;i++){
                if(this.dayArr[i].active){
                    arr.push(this.dayArr[i].name)
                }
            }
            return arr.join(",")
        },
        setTopData(data){
            this.info = {
                start:data.teacher_time?data.teacher_time.split('-')[0]:'',
                end:data.teacher_time?data.teacher_time.split('-')[1]:'',
                type:data.service_status,
                sk_date:data.teacher_date,
                serveTime:data.teacher_time?data.teacher_time.split('-')[0]+'-'+data.teacher_time.split('-')[1]:'全天皆可接单',
                password:'',
            }
            let startACtive = false
            console.log(this.info)
            if(this.info.start&&this.info.end){
                for(let i = 0; i < this.timeArr.length; i++){
                    if(!startACtive){
                        if(this.timeArr[i].time==this.info.start){
                            this.timeArr[i].active = true
                            startACtive = true
                        }
                    }else{
                        this.timeArr[i].active = true
                        if(this.timeArr[i].time==this.info.end){
                            startACtive = false
                            break
                        }
                    }
                }
            }
        },
        getData(){
          let data = {}
          index(data).then((res)=>{
              this.showCont= true
              if(res.data.code==1){
                this.setTopData(res.data.data)
              }else{
                  this.showToast = true
                  this.showText = '数据获取失败'
              }
          }).catch(()=>{
            this.showTimeOut = true
            this.showCont= true
        })
        },
        getPack(){
            
            let data = {}
            teacherCourse(data).then((res)=>{
                this.showCont= true
                if(res.data.code==1){
                    this.packArr = res.data.data
                }else{
                    this.showToast = true
                    this.showText = '数据获取失败'
                }
            }).catch(()=>{
                this.showTimeOut = true
                this.showCont= true
            })
        }
      },
      mounted(){
      },
      created() {
        this.getData()
        this.getPack()
      },
    }
  </script>
  
  <style scoped lang="less">
  .InvitationCode{
    width: 100%;
    background-color: #f7f8fa;
    box-sizing: border-box;
    padding-bottom: 0.75rem;
    padding-top: 0.25rem;
    .mainItem{
    width: 92%;
    border-radius: 0.25rem;
    background-color: #fff;
    padding: 0.75rem;
    box-sizing: border-box;
    margin: 0.75rem auto;
    .mainItemName{
      text-align: center;
      font-size: 0.8rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }
    .goodsList{
        box-sizing: border-box;
        border-radius: 0.25rem;
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 0.75rem;
        .listItem{
            width: 48%;
            padding: 0.5rem;
            background-color: #ebebeb;
            border: 1px solid #ebebeb;
            margin-bottom: 0.75rem;
            // padding: 1rem 0;
            border-radius: 0.25rem;
            // display: flex;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
            .typeTagWai{
                font-size:0.6rem;
                height: 1.1rem;
                line-height: 1.3rem;
                position: absolute;
                top:-0.1rem;
                right: -2.1rem;
                background-color: #6455d4;
                width: 5rem;
                text-align: center;
                transform: rotate(45deg);
                color: white;
                .typeTag{
                    transform: scale(0.8);
                }
                }
            .itemImg{
            width: 100%;
            font-size: 0;
            overflow: hidden;
            border-radius: 0.25rem;
            margin-right: 0.75rem;
            position: relative;
            img{
                width: 100%;
            }
            }
            .itemInfo{
            // width: 0.5rem;
            // flex: 1;
            // height: 2rem;
            padding: 0.1rem 0;
            box-sizing: border-box;
            // display: flex;
            // flex-direction: column;
            // justify-content: space-between;
            .itemName{
                width: 100%;
                overflow: hidden;
                font-size: 0.7rem;
                height: 1rem;
                line-height: 1rem;
                white-space: nowrap;
                font-weight: bold;
                text-overflow: ellipsis;
                color: #333;
                }
            .itemTag{
                height: 1rem;
                line-height: 1rem;
                font-size: 0.6rem;
                color: #666;
                margin-top: 0.25rem;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .tagDes{
                background-color: #6455d4;
                color: #fff;
                font-size: 0.6rem;
                padding: 0 0.25rem;
                line-height: 1rem;
                border-radius: 0.1rem;
                box-sizing: border-box;
                display: flex;
                .iconfont{
                    font-size: 0.6rem;
                    margin-right: 0.25rem;
                }
                }
            }
            .itemDes{
                height: 1rem;
                line-height: 1rem;
                font-size: 0.6rem;
                color: #666;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 100%;
                // margin-top: 0.2rem;
                .showNum{
                display: flex;
                align-items: center;
                .iconfont{
                    margin-right: 0.2rem;
                }
                }
            }
           
            .priceVal{
                width: 100%;
                // margin-top: 0.2rem;
                font-size: 0.6rem;
                display: flex;
                display: table-cell;
                .price{
                color: #6455d4;
                }
                .oldPrice{
                color: #666;
                text-decoration: line-through;
                }
            }
            }
        }
        .acticeGoods{
            border: 1px solid #6455d4;
            background:#f8e5ff;
        }
        .no_border{
            border-bottom: none;
        }
    }
    .formCont{
        .formItem{
            padding: 0.25rem 0;
            width: 100%;
            display: flex;
            position: relative;
            border-bottom: 1px solid rgb(245,245,245);
            .maskCont{
                width: 100%;
                padding: 0.75rem 4%;
                box-sizing: border-box;
                .maskName{
                    width: 100%;
                    text-align: center;
                    font-size: 0.8rem;
                    font-weight: bold;
                    margin-bottom: 0.75rem;
                }
                .timeCont{
                    width: 100%;
                    box-sizing: border-box;
                    display: flex;
                    flex-wrap: wrap;
                    max-height: 15rem;
                    overflow-y: auto;
                    box-sizing: border-box;
                    .timeItem{
                        width: 22%;
                        margin-left: 4%;
                        box-sizing: border-box;
                        text-align: center;
                        .timeItemMain{
                            border: 1px solid #666;
                            background-color: #ebebeb;
                            color: #666;
                            width: 100%;
                            padding: 0.75rem 0;
                            box-sizing: border-box;
                            border-radius: 0.25rem;
                            margin-bottom: 0.75rem;
                            position: relative;
                            overflow: hidden;
                            
                            .fullTag{
                                position: absolute;
                                right: 0;
                                top: 0;
                                padding: 0.05rem 0.15rem;
                                font-size: 0.6rem;
                                // background-color: #ebebeb;
                            }
                        }
                        .activeTimeMain{
                            background-color: #6455d4;
                            border: 1px solid #6455d4;
                            color: #fff;
                            
                        }
                    }
                    .noLeft{
                        margin-left: 0;
                    }
                }
                .setBtn{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .setBtnItem{
                        width: 48%;
                    }
                }
            }
            
        }
    }
  }
  }
  </style>
  <style>
    .InvitationCode .van-cell::after{
        border-bottom: none;
    }
  </style>
  